<!--
 * @Author       : wfl
 * @LastEditors: fj
 * @description  : 支持多标签展示，超出长度时以 +2 这样的方式显示
 * @updateInfo   :
 * @Date         : 2023-07-25 12:01:32
 * @LastEditTime: 2023-09-08 11:12:15
-->

<script setup lang="ts" name="IkStatuOver">
import type { PropType } from 'vue'
type TTag = { title?: string; color?: string; type?: string; background?: string; }[]

const props = defineProps({
  // 超出长度时以 +2 这样的方式显示
  overfolw: {
    type: Boolean,
    default: true
  },
  /**
   * @description: 标签列表 - 支持两种方式
   * 1. 传入字符串以“,”分割，会随机设置颜色
   * 2. 传入对象数组，对象包含 title 和 type 两个属性
   *  type: 除了'success' | 'warning' | 'info' | 'danger' | 'primary' | 'default'这些状态。 也可以是自己定义的颜色值
   * @return {*}
   */
  list: {
    type: Array as PropType<TTag | String>,
    default: () => []
  }
})

const computList: Ref<TTag> = computed(() => {
  if (Array.isArray(props.list)) {
    return props.list
  }
  else if (typeof props.list === 'string') {
    return props.list.split(',').map(item => {
      return {
        title: item,
        type: ''
      }
    })
  }
  else {
    return []
  }
})
const containerRef = ref<HTMLElement | null>(null)
// 计算能完全显示的标签数组和超出显示的标签数
const tagsToDisplay: Ref<TTag> = computed(() => {
  if (containerRef.value) {
    const containerWidth = containerRef.value.clientWidth
    let currentWidth = 24
    const displayTags: TTag = []
    let moreTagsCount = 0
    for (const tag of computList.value) {
      const tagWidth = useTextWidth(String(tag?.title || tag))
      currentWidth += tagWidth

      // 未超出长度或者只有一条数据时，直接显示
      if (currentWidth <= containerWidth || !moreTagsCount)
        displayTags.push(tag)

      moreTagsCount++
    }

    return displayTags
  }

  return computList.value
})

const moreTags = computed(() => {
  return computList.value.length - tagsToDisplay.value.length
})
const moreTagList = computed(() => {
  return computList.value
  // return computList.value.slice(tagsToDisplay.value.length)
})
</script>

<template>
  <div ref="containerRef" class="tag-container">
    <template v-for="item in tagsToDisplay" :key="item.title">
      <IkStatu
        v-if="item.title !== '--'"
        :title="item.title"
        :color="item.color"
        :background="item.background"
        :type="item.type"
        v-bind="$attrs"
        :circle="false"
      />
      <template v-else>
        {{ item.title }}
      </template>
    </template>
    <el-popover
      v-if="moreTags"
      placement="bottom"
      popper-class="ik-statu-over"
      trigger="hover"
    >
      <div>
        <template v-for="item in moreTagList" :key="item.title">
          <IkStatu
            :title="item.title"
            :color="item.color"
            :background="item.background"
            :type="item.type"
            :circle="false"
            v-bind="$attrs"
          />
        </template>
      </div>
      <template #reference>
        <el-tag
          class="more-tags"
          type="info"
          :closable="false"
        >
          +{{ moreTags }}
        </el-tag>
      </template>
    </el-popover>
  </div>
</template>

<style lang="scss">
.ik-statu-over {
  width: auto !important;
  min-width: 0!important;
}
</style>

<style scoped lang="scss">
.tag-container {
  width: 100%;
  display: flex;

  .el-tag:not(:last-child) {
    margin-right: 5px;
  }

  .el-tag {
    max-width: calc(100% - 28px);
  }

  :deep(.el-tag__content){
    width: 100%;
      display: inline-block !important;
      text-overflow: ellipsis;
      overflow: hidden;
  }
}

.more-tags {
  margin: 5px 0;
}
</style>
